<template>
  <div>
    <h3>个人中心</h3>
    <div id="uuid"><p>ID:<!--{{theusrid}}-->{{this.$store.state.activeusr}}</p></div>
    <div id="name"><p>姓名：{{name}}</p></div><br>
    <div id="phone"><p>电话号码：{{phone}}</p></div><br>
    <div id="email"><p>邮箱：{{email}}</p></div><br>
    <div>你购物车有{{this.$store.state.totalcount}}件商品</div>
    <div id="change"><input type="button" value="更改个人信息" @click="show_change_info_div"></div>

    <div id="changeinfo">
      <div >姓名：<input id="changename" type="text" placeholder="name"></div>
      <div >密码：<input id="changepwd" type="text" placeholder="password"></div>
      <div >电话：<input id="changephone" type="text" placeholder="phone number"></div>
      <div >邮箱：<input id="changeemail" type="text" placeholder="email"></div>
      <input type="button" value="确认更改" @click="save_info">
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  export default {
    name:'MemberContainer',
    mounted: {

    },

    data(){
      return {
              'name':'LBW',
              'phone':'18888888888',
              'email':'lbw@163.com'
              }
    },
    computed:{
      theusrid(){
        return this.$route.params.userid;
      },

    },
    methods:{
      get_usr_info(){
        this.name='PDD';
        this.phone='1777777777';
        this.email='ewrwef@qq,c';

      },
      show_change_info_div () {
        alert('it works');
        $('#changeinfo').css('display','inline');
      },
      save_info () {
        let new_name=document.getElementById('changename').value;
        let new_pwd=document.getElementById('changepwd').value;
        let new_phone=document.getElementById('changephone').value;
        let new_email=document.getElementById('changeemail').value;
        let mess={'name':new_name,'password':new_pwd,'phone':new_phone,'email':new_email};
        let change_info=JSON.stringify(mess);
        //send change_info to back-end
        //alert('保存信息成功！');
        alert(change_info);
      }

    }
  }





</script>

<style scoped>
h3{
  color:red;
}

#changeinfo{
  display: none;
  width: 300px;
  border: #2c3e50;
  border-radius: 2em;

}
</style>
